<template>
  <div class="city-card flex-col-center" :style="{backgroundImage:`url(${city.image})`}"
    @mouseenter="showNum=true"
    @mouseleave="showNum=false"
  >

    <div class="city-name">{{city.name}}</div>
<!--    <transition name="el-zoom-in-top">-->

      <div class="num">{{city.apartmentNum}}个公寓</div>

<!--    </transition>-->
  </div>
</template>

<script>

export default {
  name: "CityCard",
  computed: {
    url() {
      return url
    }
  },
  props:{
    city:{
      type:Object
    }
  },
  data() {
    return {
      showNum:false,
    }
  },
  methods: {}
}
</script>

<style scoped lang="less">
  .city-card{
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 200px;
    min-height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
    //background: black;
    font-weight: 550;
    cursor: pointer;
    transition: all 0.3s;
    .num{
      position: absolute;
      transition: all 0.3s;
      font-size: 14px;
      opacity: 0;
    }
    .city-name{
      font-size: 25px;
      transition: all 0.3s;
    }
    &:hover{
      .city-name{
      transform: translateY(-40%);
      }
      .num{
        opacity: 1;
        transform: translateY(100%);
      }

    }
  }
</style>